<template>
    <d2-container>
        <template slot="header">
            <div style="font-size: large; font-weight: bold;">{{arbitrationName}}</div>
        </template>

        <el-row :gutter="20" style="margin-bottom: 10px; ">
            <el-col :span="6">
                <el-tag type="" style="font-size: large; font-weight: bold;">流程状态:</el-tag>
            </el-col>
            <el-col :span="6" :offset="12" style="align-items: end; text-align: end;">
                <el-button v-if="$hasPermission('sys:arbitration:next') && !isFlowOver" type="primary" @click="addOrUpdateHandle()" size="small" style="font-size: 16px; font-weight: bold;" >下一步</el-button>
            </el-col>
        </el-row>
        <el-steps :active="currentStatus" finish-status="success" style="margin-right: 15px; margin-left: 15px;">
            <el-step v-for="item in arbitrationFlowNameList" :key="item.id" :title="item.name"></el-step>
        </el-steps>
<!--        <el-divider></el-divider>-->

<!--        <el-tag style="margin-bottom: 10px; font-size: large; font-weight: bold;">资料上传:</el-tag>-->

<!--        <el-upload-->
<!--                class="upload-demo"-->
<!--                ref="upload"-->
<!--                action="https://jsonplaceholder.typicode.com/posts/"-->
<!--                :on-preview="handlePreview"-->
<!--                :on-remove="handleRemove"-->
<!--                :file-list="fileList"-->
<!--                :auto-upload="false">-->
<!--            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>-->
<!--            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
<!--            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
<!--        </el-upload>-->
        <el-divider></el-divider>
        <el-tag type="warning" style="margin-bottom: 10px; font-size: large; font-weight: bold;">资料列表:</el-tag>
<!--        <el-form :inline="true" size="mini" :model="dataForm" @keyup.enter.native="getDataList()">-->
<!--            <el-form-item>-->
<!--                <el-input v-model="queryItems[0].value" :placeholder="$t('arbitrationFlow.name')" clearable/>-->
<!--            </el-form-item>-->
<!--            <el-form-item>-->
<!--                <el-button @click="getDataList()">{{ $t('query') }}</el-button>-->
<!--            </el-form-item>-->
<!--&lt;!&ndash;            <el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-button v-if="$hasPermission('sys:dict:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;            </el-form-item>&ndash;&gt;-->
<!--        </el-form>-->
        <el-table
                size="mini"
                v-loading="dataListLoading"
                :data="dataList"
                border
                stripe
                @selection-change="dataListSelectionChangeHandle"
                @sort-change="dataListSortChangeHandle"
                style="width: 100%;">
            <el-table-column prop="fileName" :label="$t('arbitrationDatum.fileName')" header-align="center" align="center"/>
            <el-table-column prop="arbitrationFlowName" :label="$t('arbitrationDatum.arbitrationFlowName')" header-align="center" align="center"/>
<!--            <el-table-column prop="type" :label="$t('arbitrationDatum.type')" header-align="center" align="center"/>-->
            <el-table-column prop="type" :label="$t('arbitrationDatum.type')" sortable="custom" header-align="center" align="center">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.type === 0" size="mini" type="danger">{{ $t('arbitrationDatum.type0') }}</el-tag>
                    <el-tag v-else-if="scope.row.type === 1" size="mini" type="warning">{{ $t('arbitrationDatum.type1') }}</el-tag>
                    <el-tag v-else-if="scope.row.type === 2" size="mini" type="success">{{ $t('arbitrationDatum.type2') }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" :label="$t('createTime')" sortable="custom" header-align="center" align="center" width="180"/>
            <el-table-column prop="remark" :label="$t('remark')" header-align="center" align="center"/>
            <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
                <template slot-scope="scope">
                    <el-button v-if="$hasPermission('sys:arbitration:downloadDatum')" type="text" size="mini" @click="detailHandle(scope.row)">{{ $t('downloadDatum') }}</el-button>
<!--                    <el-button v-if="$hasPermission('lawyer:update')" type="text" size="mini" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>-->
                    <el-button v-if="$hasPermission('sys:arbitration:deleteDatum')" type="text" size="mini" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" :arbitration-id="arbitrationId" :arbitration-flow-id="arbitrationFlowId"  ref="addOrUpdate" @refreshDataList="refreshData"/>
        <!-- 分页 -->
        <el-pagination
                slot="footer"
                :current-page="page"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="limit"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="pageSizeChangeHandle"
                @current-change="pageCurrentChangeHandle">
        </el-pagination>
    </d2-container>
</template>

<script>
    import AddOrUpdate from './arbitration-datum-add-or-update'
    import mixinViewModule from '@/mixins/view-module'
    import { mapMutations } from 'vuex'
    import { moduleRoutes } from '@/router'

    export default {
        mixins: [ mixinViewModule ],
        data () {
            return {
                mixinViewModuleOptions: {
                    getDataListURL: '/arbitrationDatum/page',
                    getDataListIsPage: true,
                    deleteURL: '/arbitrationDatum/delete',
                    deleteIsBatch: true
                },
                dataList: [],               // 数据列表
                page: 1,                    // 当前页码
                limit: 10,                  // 每页数
                total: 0,                   // 总条数
                dataListLoading: false,     // 数据列表，loading状态
                dataListSelections: [],     // 数据列表，多选项
                addOrUpdateVisible: false,  // 新增／更新，弹窗visible状态
                arbitrationId:0,//当前诉讼id
                arbitrationFlowId:0,//当前诉讼类型id
                dataForm:{},
                queryItems: [
                    {
                        field: 'arbitrationFlowName',
                        as: 'LIKE',
                        value: ''
                    },
                    {
                        field: 'arbitrationId',
                        as: 'EQ',
                        value: ''
                    }
                ],
                isFlowOver: false,
                arbitrationName:'',
                arbitrationFlowNameList:[],
                currentStatus:0,
                order: 'DESC',
                orderField: 'createTime'
            }
        },
        components: {
            AddOrUpdate
        },
        methods: {
            ...mapMutations('d2admin/page', {
                d2adminPagePoolPush: 'push'
            }),
            dateFormat:function(row,column) {
                const dateStr = row[column.property]
                if (dateStr != null) {
                    const dateMat = new Date(dateStr);
                    const year = dateMat.getFullYear();
                    const month = dateMat.getMonth() + 1;
                    const day = dateMat.getDate();
                    const hh = dateMat.getHours();
                    const mm = dateMat.getMinutes();
                    const ss = dateMat.getSeconds();
                    // const timeFormat = year + "-" + month + "-" + day + " " + hh + ":" + mm + ":" + ss;
                    // const timeFormat = year + "-" + month + "-" + day;
                    let timeFormat = year+'-'+ (month<10?'0'+month:month)+'-'+ (day<10?'0'+day:day);
                    return timeFormat;
                }
            },


            detailHandle:function (row) {
                let href = row.ossFilePath;
                window.open(href,'_blank')
            },

            // 根据诉讼id获取诉讼详情
            getLawsuitInfo:function(id){
                this.$axios.get(`/arbitration/info/${id}`).then(res => {
                    this.dataForm = {
                        ...this.dataForm,
                        ...res
                    }
                    this.currentStatus = res.status;
                    this.arbitrationId = res.id;

                    this.queryItems[1].value = this.arbitrationId;
                    // this.queryItems[2].value = this.arbitrationFlowId;
                    this.getDataList();
                    this.getLawsuitFlowNameList(res.arbitrationFlowId)
                }).catch(() => {})
            },

            // 根据诉讼类型id获取诉讼类型流程列表
            getLawsuitFlowNameList:function(parentId) {
                let that = this;
                return this.$axios.get('/arbitrationFlow/page', {
                    params: {
                        order: 'ASC',
                        orderField: 'sort',
                        current: 1,
                        size: 20,
                        listMode: true,
                        queryItems: 'parentId,EQ,'+parentId
                    }
                }).then(res => {
                    that.arbitrationFlowNameList = res.records
                    if(that.arbitrationFlowNameList.length === that.dataForm.status){
                        this.isFlowOver = true;
                    }else{
                        this.isFlowOver = false;
                    }
                    that.arbitrationFlowId = that.arbitrationFlowNameList[that.currentStatus].id;
                }).catch(() => {
                })
            },
            refreshData:function(){
                this.getLawsuitInfo(this.arbitrationId);
                this.getDataList();
            },
            // 获取数据列表
            getDataList () {
                this.dataListLoading = true
                this.$axios.get(
                    this.mixinViewModuleOptions.getDataListURL,
                    {
                        params: {
                            order: this.order,
                            orderField: this.orderField,
                            current: this.mixinViewModuleOptions.getDataListIsPage ? this.page : null,
                            size: this.mixinViewModuleOptions.getDataListIsPage ? this.limit : null,
                            queryItems: this.createQueryParams(this.queryItems)
                        }
                    }
                ).then(res => {
                    this.dataListLoading = false
                    this.dataList = this.mixinViewModuleOptions.getDataListIsPage ? res.records : res.records
                    this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.total : 0
                }).catch(() => {
                    this.dataList = []
                    this.total = 0
                    this.dataListLoading = false
                })
            },
            //查询条件构造器
            createQueryParams(queryItems){
                let queryParams = ''
                if(queryItems.length > 0){
                    for (let i = 0; i < queryItems.length; i++) {
                        let queryItem = queryItems[i]
                        queryParams = queryParams + queryItem.field + ',' + queryItem.as + ',' + queryItem.value + ';'
                    }
                }
                return queryParams
            },
            // 多选
            dataListSelectionChangeHandle (val) {
                this.dataListSelections = val
            },
            // 排序
            dataListSortChangeHandle (data) {
                if (!data.order || !data.prop) {
                    this.order = ''
                    this.orderField = ''
                    return false
                }
                this.order = data.order.replace(/ending$/, '').toUpperCase()
                // 将驼峰标识转成_;如:createTime ---> create_time
                // this.orderField = data.prop.replace(/([A-Z])/g, '_$1').toLowerCase()
                this.orderField = data.prop
                this.getDataList()
            },
            // 分页, 每页条数
            pageSizeChangeHandle (val) {
                this.page = 1
                this.limit = val
                this.getDataList()
            },
            // 分页, 当前页
            pageCurrentChangeHandle (val) {
                this.page = val
                this.getDataList()
            },
            // 新增 / 修改
            addOrUpdateHandle (id) {
                this.addOrUpdateVisible = true
                this.arbitrationId = this.dataForm.id;
                this.arbitrationFlowId = this.arbitrationFlowNameList[ this.dataForm.status].id;
                let arbitrationFlowName = this.arbitrationFlowNameList[ this.dataForm.status].name;
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.dataForm.arbitrationId = this.arbitrationId
                    this.$refs.addOrUpdate.dataForm.arbitrationFlowId = this.arbitrationFlowId
                    this.$refs.addOrUpdate.dataForm.arbitrationFlowName = arbitrationFlowName
                    this.$refs.addOrUpdate.init()
                })
            }

        },
        mounted: function () {
            let id = this.$route.params.parentId;
            this.arbitrationName = this.$route.params.name;
            this.getLawsuitInfo(id);
        }
    }



</script>
